<template>
  <div class="DynamiComponent">
    <div class="left">
      <li v-for="(item,index) in listArray" @click="switchComponent(index)">{{item.text}}</li>
    </div>
    <div class="right">
      <keep-alive>
        <component :is="currentView">
          <div class="zhishi">
            知识点：
            <p>引入组件，使用 component 作为标签， <br>
              绑定 is=‘组件名字’</p>
          </div>
        </component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import one from './one'
  import two from './two'
  import three from './three'

  export default {
    name: "dynami-component",
    data() {
      return {
        index: 0,
        listArray: [
          {"text": "第一项", "path": "one"},
          {"text": "第二项", "path": "two"},
          {"text": "第三项", "path": "three"}
        ]
      }
    },
    components: {one, two, three},
    computed: {
      currentView() {
        return this.listArray[this.index].path
      }
    },
    methods: {
      switchComponent(index) {
        this.index = index;
      }
    }
  }
</script>

<style scoped lang="scss">
  .DynamiComponent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 120px;
      height: 100%;
      overflow: auto;
      border-right: 1px solid #ccc;

      li {
        width: 100%;
        height: 45px;
        text-align: center;
        line-height: 45px;
        border-bottom: 1px solid red;
      }
    }
    .right {
      flex: 1;
      overflow: auto;
      height: 100%;
      padding: 10px 5px 5px 10px;
    }
  }
</style>
